<template>
  <div>
    <div class="cate">
      <div class="cate_hander">
        <h1 class="cate_title">品类管理</h1>
        <el-button @click="addcate" type="primary" icon="el-icon-plus">添加品类</el-button>
      </div>
      <div>当前商品分类ID:0</div>
      <div class="comm_Content">
        <el-table
          :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="品类ID" width="180"></el-table-column>
          <el-table-column prop="name" label="品类名称" width="680"></el-table-column>
          <el-table-column prop="status" label="操作">
            <template slot-scope="scope">
              <a @click.prevent="detail(scope.row)">修改名称</a>
              &nbsp;&nbsp;
              <a @click.prevent="updata(scope.row)">查看子品类</a>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :total="tableData.length"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { category, setcategory } from "@/request/http";
export default {
  data() {
    return {
      tableData: [],
      pagesize: 9,
      currpage: 1
    };
  },
  mounted() {
    category().then(res => {
      this.tableData = res.data.data;
    });
  },
  methods: {
    detail(v) {
      this.$prompt("请输入修改内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue:v.name
      })
        .then(({ value }) => {
          setcategory({ categoryId: v.id, categoryName: value }).then(res => {
            category().then(res2 => {
              this.tableData = res2.data.data;
            });
            this.$message({
              type: "success",
              message: "修改成功"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改"
          });
        });
    },
    updata(v) {
      console.log(v);
      
      this.$router.push({
          path: `/product/index/cateItem`,
          query: {
            data: v.id
          }
        });
    },
    addcate() {
      this.$router.push("/product/index/addcate");
    },
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    }
  }
};
</script>


<style  scoped>
.comm_Content {
  margin-top: 1%;
}
.cate_hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cate_title {
  display: inline-block;
  font-weight: normal;
}
.cate {
  width: 95%;
  margin: 0 auto;
}
</style>